import { memo, useState, forwardRef, useImperativeHandle } from 'react';
import { Button, Form, AutoComplete, Badge } from 'antd';
import Icon from '@/component/Icon';
import Styles from './index.module.less';
import useForm from '@/hooks/useForm';

import store from '@/store';
import { observer } from 'mobx-react-lite';
import { FileList } from './PrintFileList';

export type FormValue = { printer: string; paper: string; cache: number };
export type PrinterProps = {
    fileListCount: number;
    toggleSetting: (visible: boolean) => void;
    toggleFileListDrawer: (visible: boolean) => void;
    onFinish: (fileList?: FileList) => unknown;
    addLocalTask?: () => unknown;
};
export type RefProps = {
    getPrinterOption: () => { printer: string };
};

export default memo(
    observer(
        forwardRef((props: PrinterProps, ref) => {
            useImperativeHandle(ref, () => ({
                getPrinterOption: () => {
                    return form.getFieldsValue();
                }
            }));

            const { app } = store.useStore();
            const [searchPrinterKey, setSearchPrinterKey] = useState('');
            const [form, printerList] = useForm({ searchPrinterKey });

            const onFinish = () => {
                props.onFinish();
            };

            return (
                <Form
                    form={form}
                    name="printerOption"
                    labelCol={{ span: 4 }}
                    wrapperCol={{ span: 20 }}
                    onFinish={onFinish}
                    autoComplete="off"
                >
                    <Form.Item
                        label="打印机名称"
                        name="printer"
                        rules={[
                            {
                                required: true,
                                message: '请选择一台打印机'
                            }
                        ]}
                    >
                        <AutoComplete
                            allowClear={true}
                            disabled={app.isAwakenFail}
                            onSearch={(key: string) => setSearchPrinterKey(key)}
                            options={printerList}
                            placeholder={'请选择一台打印机'}
                        />
                    </Form.Item>

                    <Form.Item label="打印任务">
                        <section className={Styles.printerTask}>
                            <Badge count={props.fileListCount || 0}>
                                <Button
                                    disabled={app.isAwakenFail}
                                    onClick={() =>
                                        props.toggleFileListDrawer(true)
                                    }
                                    icon={
                                        <Icon
                                            size="20"
                                            name={'icon-B_renwuliebiao_fu'}
                                        />
                                    }
                                >
                                    查看
                                </Button>
                            </Badge>
                            <Button
                                onClick={props.addLocalTask}
                                icon={
                                    <Icon
                                        size={20}
                                        name="icon-tianjiabendigequ24"
                                    />
                                }
                            >
                                添加本地任务
                            </Button>
                        </section>
                    </Form.Item>

                    <Form.Item wrapperCol={{ span: 24 }}>
                        <Button
                            block
                            loading={app.loadingTextOption.loading}
                            type="primary"
                            htmlType="submit"
                            icon={<Icon name="icon-print" />}
                        >
                            {app.loadingTextOption.text || '全部打印'}
                        </Button>

                        <Button
                            block
                            loading={app.loadingTextOption.loading}
                            className={Styles.searchPrinter}
                            onClick={app.fetchPrinterOption}
                            icon={<Icon name="icon-search" />}
                        >
                            {app.loadingTextOption.text || '重新搜索打印机'}
                        </Button>
                    </Form.Item>
                </Form>
            );
        })
    )
);
